<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <title>海大商城首页</title>
    <meta name="title" content="海大首页">
    <meta name="keywords" content="海大珍珠商城">
    <meta name="desciption" content="海大珍珠商城是一个专注于……商城">
    <meta name="author" content="loushengyue，于景洲，宛煜，陈泽鹏，庞乃东">
    <link rel="shortcut icon" href="./img/icon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/home.css">
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">-->

</head>
<body>
<header>
    <div class="scan" ></div>
    <form>
        <input type="text" name="search-content" placeholder="海大珍珠" id="search">
        <button></button>
    </form>
    <div class="message"></div>
</header>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><a href="pro_details.html?id=25"><img src="img/banner1.png"></a></div>
        <div class="swiper-slide"><a href="pro_details.html?id=26"><img src="img/banner2.png"></a></div>
        <div class="swiper-slide"><a href="pro_details.html?id=27"><img src="img/banner3.png"></a></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
<ul class="nav">
    <li>
        <img src="img/home_nav1.png" alt="nav1">
        <span>热卖推荐</span>
    </li>
    <li>
        <img src="img/home_nav2.png" alt="nav2">
        <span>爆款商品</span>
    </li>
    <li>
        <img src="img/home_nav3.png" alt="nav3">
        <span>最新商品</span>
    </li>
    <li>
        <img src="img/home_nav1.png" alt="nav1">
        <span>推荐商品</span>
    </li>
</ul>
<div class="headline">
    <b>珍 珠 头 条</b>
    <i href="javascript:;">珍珠都有哪些种类?</i>
    <img src="img/home_headline.png" alt="headline">
</div>
<div class="middle" id="middle">
    <div class="hot">
        <img src="img/home_hot_img.png" alt="hot-img">
        <h3>热卖推荐</h3>
        <a href="pro_details.html?id=28" class="titleM">深层补水 畅饮水润<br>让你的肌肤“喝饱”水</a>
        <b class="title">水漾肌蜜三件套</b>
        <b class="price">￥<em>298</em></b>
        <a href="confirm_order.html?id=28" class="buy">立即购买</a>
    </div>
    <div class="boom">
        <h3>爆款商品</h3>
        <img src="img/home_boom_img.png" alt="boom-img">
        <a href="pro_details.html?id=29" class="titleM">在最美的年龄<br>拒绝加“斑”</a>
        <b class="title">控油“神器”三件套</b>
        <b class="price">￥<em>98</em></b>
        <a href="confirm_order.html?id=29" class="buy">立即购买</a>
    </div>
    <div class="new">
        <h3>爆款商品</h3>
        <img src="img/home_new_img.png" alt="new-img">
        <a class="titleM" href="pro_details.html?id=30">魅惑价值 尽享奢华<br>品味女士的最爱</a>
        <b class="title">来自深海的璀璨</b>
        <b class="price">￥<em>998</em></b>
        <a href="confirm_order.html?id=30" class="buy">立即购买</a>
    </div>
</div>
<div class="guess" id="guess">
    <h3>猜你喜欢</h3>
    <ul>
        <li>
            <a href="pro_details.html?id=31" class="img"><img src="img/home_guess_img1.png" alt="guess1"></a>
            <b>奢华高贵</b>
            <a href="confirm_order.html?id=31" class="buy">立即购买</a>
        </li>
        <li>
            <a href="pro_details.html?id=32" class="img"><img src="img/home_guess_img2.png" alt="guess2"></a>
            <b>精致奢华</b>
            <a href="confirm_order.html?id=32" class="buy">立即购买</a>
        </li>
    </ul>
</div>
<footer>
    <div class="option1">
        <i></i>
        <b>首页</b>
    </div>
    <div class="option2">
        <i></i>
        <b>分类</b>
    </div>
    <div class="option3">
        <i></i>
        <b>购物车</b>
    </div>
    <div class="option4">
        <i></i>
        <b>个人</b>
    </div>
</footer>
<script src="lib/zepto-1.2.0.js"></script>
<script src="lib/swiper-3.4.2.jquery.min.js"></script>
<script src="lib/resetRem.js"></script>
<script src="js/common.js"></script>
<script src="js/home.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        pagination: '.swiper-pagination',
        autoplay:3000,
        autoplayDisableOnInteraction:false
    })
</script>
</body>
</html>